<template>
  <div>
    <el-dialog
     :title="title"
     :before-close="dialogBeforeClose"
      :visible.sync="visible"
       width="50%"
        @close="dialogClose">
        <slot></slot>
        <span slot="footer" class="dialog-footer">

          <el-button @click="dialogCancel">取消</el-button>
          <el-button type="primary" @click="dialogConfirm">确定</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
  name: "i-dialog",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title:{
      type:String,
      default:''
    },
    // width:{
    //   type:Number,
    //   default:''
    // }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    dialogClose() {
      this.visible = false;
      this.$emit("input", this.visible);
    },
    dialogBeforeClose(){
      this.visible=false
      this.$emit('dialog-before-close')
    },
    dialogCancel(){
      this.$emit("dialog-cancel");
    },
    dialogConfirm(){
      this.$emit("dialog-confirm");
      
    }
  },
  watch: {
    value: {
      handler(value) {
        this.visible = value;
      },
      deep: true
    }
  },
  components: {}
};
</script>

<style>
</style>
